<template>
  <f7-popup
    class="demo-popup-swipe"
    :opened="getListState"
    @popup:closed="closeListState"
    swipe-to-close
  >
    <f7-page class="backgroundColor">
      <div class="musicList_box">
        <div class="title_box">
          <span class="title titleColor">当前播放</span>
          <span class="spanSubColor">({{ getList.length }})</span>
        </div>
        <div class="buttonBar_box">
          <f7-button v-if="getList.length" @click.stop="delAllSongs()">
            <svg-icon iconClass="ic_trash_white" v-if="getThemeDark" />
            <svg-icon iconClass="ic_trash" v-else />
          </f7-button>
        </div>
        <ul class="musicList">
          <li
            class="liItem"
            :class="{ playingItem: index === getMusicPlace }"
            v-for="(item, index) in getList"
            :key="index"
          >
            <div class="item_l" @click.stop="selectMusic(index)">
              <svg-icon
                iconClass="playing_list"
                v-if="index === getMusicPlace"
              />
              <span class="liTitle spanColor"
                >{{ item.name
                }}<span class="liSubTitle spanSubColor"
                  >-{{ item.singer }}</span
                ></span
              >
            </div>
            <div class="item_r">
              <f7-button @click.stop="delMusic(index)">
                <svg-icon iconClass="cancel_icon_white" v-if="getThemeDark" />
                <svg-icon iconClass="cancel_icon" v-else />
              </f7-button>
            </div>
          </li>
        </ul>
        <div class="closeList_box">
          <f7-link popup-close style="width:100%">
            <f7-button class="buttonSubColor closeButton" style="width:100%">
              <div class="buttonDiv">
                <svg-icon iconClass="cancel_icon_white" v-if="getThemeDark" />
                <svg-icon iconClass="cancel_icon" v-else />

                <span class="spanColor">关闭播放列表</span>
              </div>
            </f7-button>
          </f7-link>
        </div>
      </div>
    </f7-page>
  </f7-popup>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      index: 0,
    }
  },
  computed: {
    ...mapGetters({
      getListState: 'getListState',
      getList: 'getList',
      getMusicPlace: 'getMusicPlace',
       getThemeDark:'getThemeDark',
    }),
  },
  methods: {
    ...mapActions({
      closeListState: 'closeListState',
      selectMusic: 'selectMusic',
      delMusic: 'delMusic',

    }),
    delAllSongs() {
      let self = this
      this.$f7ready((f7) => {
        f7.dialog.confirm('确定清空播放列表吗?', function() {
          let Len = self.getList.length;
          for (let i = 0; i < Len; i++) {
            self.delMusic(0)
          }
          var toastTop = f7.toast.create({
            text: '清空成功',
            position: 'top',
            closeTimeout: 1500,
          })
          toastTop.open()
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/theme.scss";
.musicList_box {
  padding: 4vh 0.15rem;
  height: 92vh;
  .title_box {
    height: 6vh;
    .title {
      font-size: 19px;
      font-family: initial;
      font-weight: 600;
      margin-left: 0.1rem;
    }
  }
  .buttonBar_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 7vh;
  }
  ul {
    padding-left: 0.1rem;
    height: 67vh;
    margin: 1vh 0;
    overflow-y:scroll;
  }

  .liItem {
    display: flex;
    align-items: center;
    margin:0.05rem 0;
    
    .liTitle {
      font-size: 17px;
      font-family: cursive;
      font-weight: 600;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      overflow: hidden;
      word-break: break-all;
      line-height: 0.15rem;
      -webkit-box-orient: vertical;
      .liSubTitle {
        font-family: cursive;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .item_l {
      flex: 1;
      display: flex;
      align-items: center;
      .liTitle {
        flex: 1;
      }
    }
    .item_r {
      margin-left: 0.2rem;
      .svg-icon {
        width: 0.2rem;
        height: 0.2rem;
      }
    }
  }
  .playingItem {
    .liTitle {
      color: #ff3b30 !important;
      span {
        color: #ff3b30 !important;
      }
    }
  }
  .closeList_box {
    width: 100%;
    height: 10vh;
    text-align: center;
    display: flex;
    align-items: flex-end;
  }
  .closeButton {
    font-size: 16px;
    font-weight: 600;
    .buttonDiv {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .svg-icon {
      width: 0.2rem;
      height: 0.2rem;
    }
    span {
      line-height: 0.2rem;
      height: 0.2rem;
      margin-left: 0.05rem;
      margin-bottom: 0.01rem;
    }
  }
}
</style>
